<template>
  <view>
    <!-- #ifdef H5 -->
    <view>浏览器里面的dom元素</view>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <view>微信小程序</view>
    <!-- #endif -->

    <view class="bg">测试颜色</view>
    <!-- 模块1：收货地址 -->
    <view class="address">
      <!-- 正常情况：显示收货地址 -->
      <view v-if="addressInfo.userName" class="address-info">
        <view class="address-detail">{{ addressDetail }}</view>
        <view class="address-user"> {{ addressInfo.userName }} {{ addressInfo.telNumber }} </view>
      </view>
      <!-- 互斥情况：显示添加按钮 -->
      <view v-else class="address-btn" @click="addAddress">添加地址</view>
    </view>
    <!-- 模块2：已选商品列表 -->
    <view class="goods-list">
      <view class="goods-title">已选商品</view>
      <view class="cart-item" v-for="item in checkedGoodsList" :key="item.goods_id">
        <view class="cart-count"> x{{ item.goods_number }} </view>
        <navigator class="goods-item" hover-class="none" :url="`/pages/index/index`">
          <!-- 商品图片 -->
          <image class="goods-image" :src="item.goods_small_logo" mode="aspectFit" />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.goods_number }}</view>
            <view class="goods-price">{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
    </view>
    <!-- 模块3：底部操作栏 -->
    <view class="bottom-bar">
      <view class="bottom-bar-fixed">
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ checkedGoodsPrice }}</text>
        </view>
        <!-- 结算 -->
        <view class="account" @click="goToPay"> 去支付({{ checkedGoodsCount }}) </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      addressInfo: {},
    };
  },
  computed: {
    ...mapGetters(['checkedGoodsList', 'checkedGoodsPrice', 'checkedGoodsCount']),
    addressDetail() {
      return this.addressInfo.cityName + this.addressInfo.countyName + this.addressInfo.detailInfo;
    },
  },
  onLoad() {
    // #ifdef H5
    console.log('如果是h5端，我们这里就发个请求');
    // #endif

    // #ifdef MP-WEIXIN
    console.log('如果是微信小程序就发另一个请求');
    // #endif
  },
  methods: {
    addAddress() {
      console.log(111);
      // 调用微信小程序原生的地址界面
      wx.chooseAddress({
        success: (res) => {
          // 一定要注意，下面的this如果指向错误了，不会报错！！！
          this.addressInfo = res;
        },
        fail(err) {
          console.log(222, err);
        },
      });
    },
    async goToPay() {
      // 核心就是准备wx.requestPayment 需要的5个参数
      if (!this.addressInfo.cityName) {
        // 写return就不用写 else  --- 代码review 领导看你的代码质量，如果不行， 那么这个pr就会撤回
        return wx.showToast({
          title: '请选择收获地址',
          icon: 'none',
        });
      }

      // 1. 创建订单 --- 获取订单号
      const res = await uni.$u.http.post('/my/orders/create', {
        order_price: this.checkedGoodsPrice,
        consignee_addr: this.addressDetail,
        goods: this.checkedGoodsList.map((item) => ({
          goods_id: item.goods_id,
          goods_number: item.goods_number,
          goods_price: item.goods_price,
        })),
      });

      console.log(11, res.data.message.order_number);

      // 2. 通过上一步的 "订单编号" 发请求 获取5个参数
      const res1 = await uni.$u.http.post('/my/orders/req_unifiedorder', {
        order_number: res.data.message.order_number,
      });

      console.log(22, res1.data.message.pay);

      // 3. 通过wx.requestPayment 调起原生支付页面 -- 使用上一步请求返回的5个参数
      wx.requestPayment({
        ...res1.data.message.pay,
        success(res) {
          // 一般是跳转到订单页面，我们这里没有做
          console.log(333, res);
        },
      });
    },
  },
};
</script>

<style lang="scss">
/* #ifdef H5 */
.bg {
  background-color: red;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.bg {
  background-color: blue;
}
/* #endif */

page {
  background-color: #f4f4f4;
}
// 模块1：收货地址
.address {
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .address-info {
    width: 100%;
    .address-detail {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
  }
  .address-btn {
    width: 303rpx;
    height: 90rpx;
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eb4450;
    color: #eb4450;
  }
}

// 模块2：已选商品列表
.goods-list {
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  .goods-title {
    line-height: 40rpx;
    font-size: 26rpx;
  }
  .cart-item {
    position: relative;
    .cart-count {
      position: absolute;
      right: 20rpx;
      bottom: 30rpx;
    }
    // 选中最后一项
    &:last-child {
      .goods-item {
        border: none;
      }
    }
  }
}
// 全局公共样式
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
